<template>
    <div class="avatar">
        <div>
            <label>
                <img :src="avatar?avatar:require('../assets/PersonPhoto/u57.png')" alt="" name="avatar" height="110" width="220">
                <input type="file" :multiple="multiple" class="input-file" name="avatar" @change="changeImage($event)">
            </label>
        </div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';
    import {AXIOS_POST} from '@/lib/axios'
    import { Indicator } from 'mint-ui';

    export default {
        name: 'upload',
        data() {
            return {
                avatar: this.imgUrl,
                file: '',
                showBg: true
            }
        },
        watch: {
            imgUrl ( value ) {
                this.avatar = value
            }
        },
        props: {
            imgUrl: {
                type: String,
                default: ''
            },
            multiple: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            changeImage: function (e) {
                Indicator.open();
                let file = e.target.files[0];
                // console.log(file);
                if (file.type  !== 'image/jpeg') {
                    this.$message({
                        message: "当前图片上传只支持JPG格式!",
                        type: "warning"
                    });
                    return
                }
                if (file.size / 1024 > 5000) {
                    this.$message({
                        message: "图片过大不支持上传",
                        type: "warning"
                    });
                    return
                }
                if (file) {
                    this.file = file;
                    let reader = new FileReader();
                    let that = this;
                    reader.readAsDataURL(file);
                    reader.onload = function (e) {
                        // 这里的this 指向reader
                        that.avatar = this.result;
                        that.$emit('change', this.result)
                        let _base64 = that.avatar;
                        var _base = _base64.substr(_base64.indexOf(",") + 1);
                        var base64 = _base.replace(/\+/g,"%2B");
                        // console.log(base64)
                        var param = {
                            "wxRequestDate": (new Date()).format("yyyyMMddhhmmss"),
                            "service": 'pisUploadForWx',
                            // "fileType": 1,
                            "pic_base64": base64
                        };
                        AXIOS_POST({
                            json: param
                        }).then(data => {
                            Toast('上传成功');
                            that.$emit('getImgData', data)
                        })

                    }
                }
            },

        }

    }
</script>


<style lang="less" scoped>
    .avatar {
        cursor: pointer;
        position: relative;

        .input-file {
            display: none;
        }

    }
</style>
